<template>
<div class="line-chart-box">
  <div class="line-chart">
    <LineChart
      :chart-data="chartData"
      :color="['#00FDFF']"
      :text="['告警']"
      unit="次"
      :area="true"
    />
  </div>
</div>
</template>

<script>
import LineChart from '@/components/chart/line/LineChart.vue';
export default {
  components: {
    LineChart
  },

  data() {
    return {
    };
  },

  props: {
    chartData: {
      typeof: Array,
      default: () => []
    }
  }
};
</script>

<style lang="scss" scoped>
.line-chart {
  width: 20.625rem;
  height: 8.4375rem;
  margin-top: 1.5625rem;
}
.chart-wrap {
  display: flex;
  height: 9.75rem;
  flex-direction: column;
  // flex: 1;
  margin-top: 0.625rem;

  .title {
    display: flex;
    justify-content: space-between;
    font-size: $auxiliaryText;
    color: $light2Grey;
    height: 0.875rem;
    line-height: 0.875rem;

    .line {
      flex: 1;
      height: 0.5rem;
      border-bottom: 0.0625rem dashed $lightGrey;
      margin-left: 0.625rem;
    }
  }
}
</style>
